<template>
  <div class="playerBar">
    <v-musicList v-if="hasMusicList" />
    <ul class="playerBar_box" @click="$f7router.navigate('/playerInfo/',{props:{from:from}})">
      <li class="playerBar_l">
        <img :src="songInfo.coverUrl" v-if="songInfo && songInfo.coverUrl" class="auto-rotate" :class="{ pause: playBtnClass === 'play_button' }"/>
        <svg-icon
          icon-class="record_rotatable_white"
          ref="rotateRecord"
          class="auto-rotate"
          :class="{ pause: playBtnClass === 'play_button' }"
          v-else-if="getThemeDark"
        />
        <svg-icon
          icon-class="record_rotatable"
          ref="rotateRecord"
          class="auto-rotate"
          :class="{ pause: playBtnClass === 'play_button' }"
          v-else
        />
      </li>
      <li class="playerBar_m">
        <span class="songName spanColor"
          >{{ songInfo.name }} -{{ songInfo.singer }}</span
        >
      </li>
      <li class="playerBar_r">
        <f7-button class="f7-button" @click.stop="play">
          <svg-icon :icon-class="playBtnClass + '_white'" v-if="getThemeDark" />
          <svg-icon :icon-class="playBtnClass" v-else />
        </f7-button>
        <f7-button class="f7-button" @click.stop="openListState">
          <svg-icon icon-class="list_icon_white" v-if="getThemeDark" />
          <svg-icon icon-class="list_icon" v-else />
        </f7-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import MusicList from '@/components/musiclist.vue'
export default {
  components: {
    'v-musicList': MusicList,
  },
  props: {
    hasMusicList: {
      type: Boolean,
      default: false,
    },
    from:{
      type:String,
      default:'',
    }
  },
  computed: {
    ...mapGetters({
      songInfo: 'songInfo',
      playBtnClass: 'playBtnClass',
      autoRotateClass: 'autoRotateClass',
      getThemeDark: 'getThemeDark',
    }),
  },
  data() {
    return {
      popupOpened: false,
    }
  },
  methods: {
    ...mapActions({
      play: 'play',
      openListState: 'openListState',
    }),
  },
  mounted() {

  },
}
</script>
<style lang="scss" scoped>
.playerBar {
  position: relative;
}
.playerBar_box {
  display: flex;
  align-items: center;
  height: 0.8rem;
  margin: 0 0;
  overflow: hidden;
  padding-left: 0.15rem;
}
.playerBar_l {
  height: 18vw;
  width: 18vw;
  max-width: 90px;
  max-height: 90px;
  img {
    width: 16vw;
    height: 16vw;
    border-radius: 50%;
    
  }
  .svg-icon {
    width: 16vw;
    height: 16vw;
  }
}
.playerBar_m {
  flex: 1;
  padding-left: 0.1rem;
  height: 16vw;
  display: flex;
  align-items: flex-end;
  .songName {
    font-family: cursive;
    font-size: 0.15rem;
    line-height: 0.15rem;
    overflow: hidden; /** 隐藏超出的内容 **/
    word-break: break-all;
    text-overflow: ellipsis; /** 多行 **/
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    margin-bottom: 0.2rem;
  }
}
.playerBar_r {
  height: 16vw;
  display: flex;
  align-items: flex-end;
  .f7-button {
    display: inline-block;
    margin-bottom: 0.1rem;
    .svg-icon {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
</style>
